import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../../utils/xh_styles.dart';
import '../../../utils/xin_he_image.dart';
import 'xin_he_oil_card_exchange_logic.dart';

class XinHeOilCardExchangePage extends StatelessWidget {
  XinHeOilCardExchangePage({Key? key}) : super(key: key);

  final logic = Get.put(XinHeOilCardExchangeLogic());
  final state = Get.find<XinHeOilCardExchangeLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: IconButton(
              onPressed: (){
                Get.back();
              },
              icon: Container(
                padding: const EdgeInsets.only(left: 7),
                alignment: Alignment.centerLeft,
                child: const XinHeAssetImage(
                  'assets/images/home/app_back_3.png',
                  width: 9.5,
                  height: 17,
                  fit: BoxFit.cover,),
              )
          ),
          backgroundColor: Colors.white,
          shadowColor: Colors.transparent,
          title: Text('茶油卡兑换',style: TextStyle(color:XinHeColor('#222222'),fontSize: 17,fontWeight: FontWeight.w600)),
          centerTitle: true,
        ),
        body: Obx(() => Column(children: [
          Container(
              height: 31,
              margin: const EdgeInsets.symmetric(horizontal: 15),
              alignment: Alignment.centerLeft,
              child: Text('兑换茶油',style: TextStyle(color: XinHeColor('#666666'),fontSize: 13,fontWeight: FontWeight.w500),)),
          Container(
            height: 45,
            margin: const EdgeInsets.symmetric(horizontal: 15),
            padding: const EdgeInsets.symmetric(horizontal: 15),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(5),
            ),
            child: Row(children: [
              Text('兑换数量',style: TextStyle(color: XinHeColor('#333333'),fontSize: 13,fontWeight: FontWeight.w500),),

              const Spacer(),
              Container(
                width: 130,
                height: 45,
                alignment: Alignment.centerRight,
                child: TextField(
                  // maxLength: 8,
                  maxLines: 1,
                  keyboardType: TextInputType.number,
                  textAlign: TextAlign.right,
                  onChanged: (value){
                    // callback(value);
                    logic.count.value = value;
                  },
                  style:  TextStyle(
                      color: XinHeColor("#15161F"), fontSize: 14 ,fontWeight: FontWeight.w400),
                  decoration:  InputDecoration(
                      border: InputBorder.none,
                      contentPadding: EdgeInsets.only(bottom: 2),
                      hintText: '请输入兑换数量',
                      counterStyle: TextStyle(
                          color: XinHeColor("#A6A6A6"), fontSize: 13),
                      hintStyle:  TextStyle(
                          color: XinHeColor("#A6A6A6"), fontSize: 13)),
                ),
              ),
              const SizedBox(width: 5,),
              Text('瓶',style: TextStyle(color: XinHeColor('#333333'),fontSize: 13,fontWeight: FontWeight.w500),),

            ],),
          ),

          Container(
              height: 31,
              margin: const EdgeInsets.symmetric(horizontal: 15),
              alignment: Alignment.centerLeft,
              child: Text('领取方式',style: TextStyle(color: XinHeColor('#666666'),fontSize: 13,fontWeight: FontWeight.w500),)),
          Container(
            height: 45,
            margin: const EdgeInsets.symmetric(horizontal: 15),
            padding: const EdgeInsets.symmetric(horizontal: 15),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(5),
            ),
            child: Row(children: [

              GestureDetector(
                onTap: (){
                  logic.handleSelectedMethod(true);

                },
                child: Row(children: [
                  XinHeAssetImage(state.isSelectedFirst.value? 'assets/images/login/login_selected.png':'assets/images/login/unselected_grey.png',width: 16,height: 16,),
                  const SizedBox(width: 3,),
                  Text('线下领取',style: TextStyle(color: XinHeColor('#333333'),fontSize: 13,fontWeight: FontWeight.w500),),
                ],),
              ),


              const SizedBox(width: 80,),
              GestureDetector(
                onTap: (){
                  logic.handleSelectedMethod(false);
                },
                child: Row(children: [
                  XinHeAssetImage(state.isSelectedFirst.value?'assets/images/login/unselected_grey.png':'assets/images/login/login_selected.png',width: 16,height: 16,),
                  const SizedBox(width: 3,),
                  Text('快递配送',style: TextStyle(color: XinHeColor('#333333'),fontSize: 13,fontWeight: FontWeight.w500),),
                ],),
              )

            ],),
          ),

          const SizedBox(height: 40,),
          Container(
            margin:   EdgeInsets.only(left: 15,right: 15,bottom: Get.mediaQuery.padding.bottom+25),
            height: 44,
            width: double.infinity,
            decoration: BoxDecoration(color:XinHeColor('#30E9E9'),borderRadius: const BorderRadius.all(Radius.circular(22))),
            child: OutlinedButton(

              onPressed: () {

                logic.sureExchange();
              },
              child:  const Text (
                "确认兑换",
                style: TextStyle (fontSize: 16,color:  Colors.white, fontWeight: FontWeight.bold) ,
                strutStyle: StrutStyle(
                  fontSize: 16,
                  leading: 0,
                  height: 1.1,
                  // 1.1更居中
                  forceStrutHeight: true, // 关键属性 强制改为文字高度
                ),
              ),
            ),),



        ],)),
    );
  }
}
